<template>
	<view class="container-wrapper">
		<u-navbar title=" " :autoBack="true" bgColor="#3B67A5" :fixed="true" :placeholder="true">
			<view class="u-nav-slot flex-row y-center" slot="left">
				<u-icon name="arrow-left" size="19" color="#fff"></u-icon>
				<text class="label">车牌号</text>
				<text class="value">{{tblViolationRecord.plate||'未知'}}</text>
			</view>
		</u-navbar>
		<view class="card-section">
			<view class="flex-row y-center title-wrapper">
				<u--image src="/static/waiting.png" width="44rpx" height="44rpx"></u--image>
				<text class="title">违停信息</text>
			</view>
			<view class="from-wrapper">
				<u--form labelPosition="left" labelWidth="150rpx" :model="tblViolationRecord" ref="uForm">
					<u-form-item label="车主姓名" prop="name">
						<u--input readonly v-model="cVehicle.name||'未知'" placeholder="" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="moble">
						<u--input readonly :value="$commonUtil.truncateStrReplaceStar(cVehicle.moble)||'未知'"
							placeholder="" border="none"></u--input>
					</u-form-item>
					<u-form-item label="车辆类型" prop="registrationType">
						<u--input v-model="cVehicle.registrationType||'未知'" placeholder="" border="none"></u--input>
					</u-form-item>
					<u-form-item label="所在校区" prop="campusCode">
						<u--input readonly
							:value="tblViolationRecord.campusCode==1?'华西':tblViolationRecord.campusCode==2?'望江':'江安'"
							placeholder="" border="none"></u--input>
					</u-form-item>
					<u-form-item label="违停地点" prop="location">
						<u--input readonly v-model="tblViolationRecord.location" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="上报人员" prop="recorderName">
						<u--input readonly v-model="tblViolationRecord.recorderName" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="登记时间" prop="violationTime">
						<u--input readonly v-model="tblViolationRecord.violationTime" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="违停描述" prop="description">
						<u--input readonly v-model="tblViolationRecord.description" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label=" " labelPosition="top" prop="violationPhotos">
						<view @click="previewImageFn(tblViolationRecord.violationPhotos)" class="img-wrapper"
							v-if="tblViolationRecord.violationPhotos"
							v-for="(item,index) in tblViolationRecord.violationPhotos">
							<u--image :showLoading="true" :src="item" width="80px" height="80px"></u--image>
						</view>

					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="card-section" v-if="tblViolationHandling.id">
			<view class="flex-row y-center title-wrapper">
				<u--image src="/static/note.png" width="44rpx" height="46rpx"></u--image>
				<text class="title">处置信息登记</text>
			</view>
			<view class="from-wrapper">
				<u--form labelPosition="left" labelWidth="150rpx" :model="tblViolationHandling" :rules="rules"
					ref="uForm">
					<u-form-item label="处置人" prop="recorderName" borderBottom required>
						<u--input readonly v-model="tblViolationHandling.recorderName" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="处置时间" prop="handleTime" borderBottom>
						<u--input readonly readonly v-model="tblViolationHandling.handleTime" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="处置描述" prop="resultDescription" borderBottom>
						<u--input readonly v-model="tblViolationHandling.resultDescription" placeholder=""
							border="none"></u--input>
					</u-form-item>
					<u-form-item label=" " labelPosition="top" prop="violationPhotos">
						<u--image v-if="tblViolationRecord.violationPhotos"
							v-for="(item,index) in tblViolationRecord.violationPhotos" :showLoading="true" :src="item"
							width="80px" height="80px">
						</u--image>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<uniLoading v-if="loadingCover" bgColor="#fff"></uniLoading>
	</view>
</template>

<script>
	import {
		getViolationDetailsApi
	} from '@/apis/disposal.js'
	export default {
		data() {
			return {
				tblViolationHandling: {},
				tblViolationRecord: {},
				cVehicle: {},
				id: '',
				loadingCover: true
			}
		},
		onLoad(options) {
			this.id = options.id || '';
			console.log('onLoad')
			this.getData();
		},
		methods: {
			// 预览图片
			previewImageFn(list) {
				if (list.length) {
					// 预览图片
					uni.previewImage({
						urls: list,
						longPressActions: {
							itemList: ["发送给朋友", "保存图片", "收藏"],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							},
						},
					});
				}
			},
			async getData() {
				try {
					let resp = await getViolationDetailsApi({
						id: this.id
					})
					let tblViolationHandling = resp.tblViolationHandling || {};
					let tblViolationRecord = resp.tblViolationRecord || {};
					if (tblViolationHandling.violationPhotos) {
						let violationPhotosArr = tblViolationHandling.violationPhotos.split(',');
						console.log(violationPhotosArr, 'violationPhotosArr')
						tblViolationHandling.violationPhotos = violationPhotosArr
					}
					if (tblViolationRecord.violationPhotos) {
						let violationPhotosArr = tblViolationRecord.violationPhotos.split(',');
						tblViolationRecord.violationPhotos = violationPhotosArr
					}
					this.tblViolationHandling = tblViolationHandling;
					this.tblViolationRecord = tblViolationRecord;
					this.cVehicle = resp.cVehicle || {};
					console.log(this.tblViolationHandling, 'this.tblViolationHandling')
				} catch (e) {
					console.log(`%获取详情，${e.message},'background:orange'`)
				} finally {
					this.loadingCover = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-wrapper {
		width: 100%;
		min-height: 100%;
		background: #FAFAFA;
		padding: 0 30rpx;

		.img-wrapper {
			margin-right: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.u-nav-slot {
			color: #FFFFFF;

			.label {
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.value {
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}

		.card-section {
			.title-wrapper {
				height: 78rpx;

				.title {
					font-size: 28rpx;
					color: #141414;
					margin-left: 12rpx;
				}
			}
		}

		.from-wrapper {
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 15rpx;



			/deep/.u-input__content__field-wrapper__field {
				text-align: right !important;
			}

			.address-btn {
				font-size: 26rpx;
				color: #3B67A5;
				margin-right: 10rpx;
			}
		}

		.custom-style {
			background-color: #3B67A5;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 15rpx;
			margin-top: 40rpx;
		}
	}
</style>